<template>
  <div>
    <!-- 这是首页主页 静态内容（分类组件） -->
    <div class="wrapper">
      <StaticPart />
      <!-- 商铺组件 -->
      <NearBy :goodsData="goodsData" @go="handler" />
      <!-- 容器组件（是其他组件都能使用，非home私有） -->
    </div>
    <Docker :changeClass="'home'" />
  </div>
</template>

<script>
export default {
  //往后 想哪个组件做数据缓存就起个名字即可
  // 给组件定义名字
  name: 'home',

}
</script>


<script setup>
import { Toast } from 'vant';
import StaticPart from './components/StaticPart.vue'
import NearBy from './components/NearBy.vue'
import Docker from '../../components/Docker.vue'
import ShopName from '../home/components/ShopName.vue'
import { ref, reactive } from "vue";
import { getNotHeader, post } from '../../utils/request'




let goodsData = ref([])
let params = reactive({ project_id: 242, page: 1, limit: 10 })

const getData = async () => {
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
  });

  let res = await getNotHeader('/goods', params)
  console.log(res);
  goodsData.value = goodsData.value.concat(res.result.rows)
}
getData()




const handler = () => {
  // 请求更多的数据
  //  触底一次就会触发一次handler page++ =》法请求
  params.page++
  getData();
}



</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.5rem;
}
</style>